<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>社交广场 - 话题详情与分类列表</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #4285F4;
            --secondary: #8E24AA;
            --success: #0F9D58;
            --warning: #FF9800;
            --danger: #F44336;
            --dark: #202124;
            --light: #F8F9FA;
            --gray: #5F6368;
            --light-gray: #E8EAED;
            --border-radius: 12px;
            --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #F5F7FA;
            color: var(--dark);
            padding-top: 56px;
            padding-bottom: 60px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }
        
        .nav-title {
            font-size: 18px;
            font-weight: 600;
        }
        
        .nav-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: none;
            border: none;
            color: var(--gray);
            font-size: 20px;
        }
        
        /* 内容类型切换 */
        .content-tabs {
            display: flex;
            background-color: white;
            border-bottom: 1px solid var(--light-gray);
            overflow-x: auto;
            scrollbar-width: none;
        }
        
        .content-tabs::-webkit-scrollbar {
            display: none;
        }
        
        .content-tab {
            padding: 12px 16px;
            white-space: nowrap;
            font-size: 15px;
            font-weight: 500;
            color: var(--gray);
            background: none;
            border: none;
            border-bottom: 2px solid transparent;
        }
        
        .content-tab.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }
        
        /* 话题详情卡片 */
        .topic-detail-card {
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--card-shadow);
            margin: 12px;
            overflow: hidden;
        }
        
        .topic-header {
            padding: 16px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }
        
        .topic-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .topic-creator {
            flex: 1;
        }
        
        .creator-name {
            font-size: 16px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .creator-badge {
            font-size: 10px;
            padding: 1px 5px;
            border-radius: 4px;
            background-color: var(--primary);
            color: white;
        }
        
        .topic-meta {
            font-size: 13px;
            color: var(--gray);
            margin-top: 4px;
        }
        
        .topic-content {
            padding: 0 16px 16px;
        }
        
        .topic-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 12px;
            line-height: 1.5;
        }
        
        .topic-text {
            font-size: 16px;
            line-height: 1.6;
            margin-bottom: 16px;
        }
        
        .topic-image {
            width: 100%;
            border-radius: 8px;
            margin-bottom: 16px;
        }
        
        .topic-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
        }
        
        .topic-tag {
            padding: 4px 12px;
            background-color: rgba(66, 133, 244, 0.1);
            border-radius: 16px;
            font-size: 13px;
            color: var(--primary);
        }
        
        .topic-stats {
            display: flex;
            gap: 20px;
            padding: 12px 16px;
            border-top: 1px solid var(--light-gray);
            font-size: 14px;
        }
        
        .topic-stat {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--gray);
        }
        
        .topic-actions {
            display: flex;
            border-top: 1px solid var(--light-gray);
        }
        
        .topic-action {
            flex: 1;
            padding: 12px 0;
            background: none;
            border: none;
            color: var(--gray);
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .topic-action:hover, .topic-action.active {
            color: var(--primary);
        }
        
        /* 通用列表样式 */
        .content-list {
            padding: 12px;
        }
        
        .list-item {
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--card-shadow);
            padding: 16px;
            margin-bottom: 12px;
            transition: transform 0.2s ease;
        }
        
        .list-item:hover {
            transform: translateY(-2px);
        }
        
        /* 文章列表样式 */
        .article-item {
            display: flex;
            gap: 12px;
        }
        
        .article-image {
            width: 100px;
            height: 100px;
            border-radius: 8px;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .article-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .article-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 6px;
            line-height: 1.4;
        }
        
        .article-excerpt {
            font-size: 14px;
            color: var(--gray);
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 8px;
            flex: 1;
        }
        
        .article-meta {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: var(--gray);
        }
        
        /* 相册列表样式 */
        .album-item {
            overflow: hidden;
        }
        
        .album-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 12px;
        }
        
        .album-images {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4px;
        }
        
        .album-image {
            aspect-ratio: 1/1;
            overflow: hidden;
            border-radius: 4px;
        }
        
        .album-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .album-more {
            position: relative;
        }
        
        .album-more::after {
            content: '+9';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }
        
        .album-meta {
            margin-top: 10px;
            font-size: 13px;
            color: var(--gray);
            display: flex;
            justify-content: space-between;
        }
        
        /* 动态列表样式 */
        .status-item {
            display: flex;
            gap: 12px;
        }
        
        .status-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .status-content {
            flex: 1;
        }
        
        .status-author {
            font-weight: 600;
            font-size: 15px;
            margin-bottom: 4px;
        }
        
        .status-text {
            font-size: 15px;
            margin-bottom: 10px;
            line-height: 1.5;
        }
        
        .status-images {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4px;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 10px;
        }
        
        .status-image {
            aspect-ratio: 1/1;
            overflow: hidden;
        }
        
        .status-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .status-time {
            font-size: 12px;
            color: var(--gray);
            margin-bottom: 8px;
        }
        
        .status-actions {
            display: flex;
            gap: 16px;
            font-size: 13px;
            color: var(--gray);
        }
        
        .status-action {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        /* 服务列表样式 */
        .service-item {
            display: flex;
            gap: 16px;
        }
        
        .service-icon {
            width: 56px;
            height: 56px;
            border-radius: 8px;
            background-color: rgba(66, 133, 244, 0.1);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            flex-shrink: 0;
        }
        
        .service-content {
            flex: 1;
        }
        
        .service-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .service-desc {
            font-size: 14px;
            color: var(--gray);
            margin-bottom: 8px;
            line-height: 1.4;
        }
        
        .service-meta {
            display: flex;
            gap: 12px;
            font-size: 13px;
        }
        
        .service-price {
            color: var(--danger);
            font-weight: 600;
        }
        
        .service-rating {
            color: var(--warning);
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        /* 招聘求职列表样式 */
        .job-item {
            border-left: 4px solid var(--primary);
        }
        
        .job-title {
            font-size: 17px;
            font-weight: 600;
            margin-bottom: 6px;
        }
        
        .job-company {
            font-size: 14px;
            color: var(--gray);
            margin-bottom: 8px;
        }
        
        .job-details {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 12px;
            font-size: 13px;
            color: var(--gray);
            margin-bottom: 10px;
        }
        
        .job-tag {
            padding: 2px 8px;
            background-color: var(--light);
            border-radius: 4px;
        }
        
        .job-meta {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: var(--gray);
        }
        
        .resume-item {
            border-left: 4px solid var(--secondary);
        }
        
        .resume-name {
            font-size: 17px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .resume-title {
            font-size: 15px;
            color: var(--dark);
            margin-bottom: 8px;
        }
        
        .resume-details {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 12px;
            font-size: 13px;
            color: var(--gray);
            margin-bottom: 10px;
        }
        
        .resume-experience {
            color: var(--primary);
            font-weight: 500;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background-color: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--light-gray);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--gray);
            font-size: 10px;
            gap: 4px;
            text-decoration: none;
            flex: 1;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        .nav-icon {
            font-size: 20px;
        }
        
        /* 加载更多 */
        .load-more {
            width: 100%;
            padding: 12px;
            margin: 12px 0;
            border-radius: 8px;
            background-color: white;
            border: 1px solid var(--light-gray);
            color: var(--dark);
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        /* 切换内容区域显示 */
        .content-section {
            display: none;
        }
        
        .content-section.active {
            display: block;
        }
        
        /* 话题详情特殊样式 */
        #topicDetail {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">社交广场</div>
        <button class="nav-btn" id="moreBtn">
            <i class="fas fa-ellipsis-v"></i>
        </button>
    </div>
    
    <!-- 内容类型切换 -->
    <div class="content-tabs">
        <button class="content-tab active" data-target="topicDetail">话题详情</button>
        <button class="content-tab" data-target="articles">文章</button>
        <button class="content-tab" data-target="albums">相册</button>
        <button class="content-tab" data-target="statuses">动态</button>
        <button class="content-tab" data-target="services">服务</button>
        <button class="content-tab" data-target="jobs">招聘</button>
        <button class="content-tab" data-target="resumes">求职</button>
    </div>
    
    <!-- 话题详情区域 -->
    <div class="content-section active" id="topicDetail">
        <div class="topic-detail-card">
            <div class="topic-header">
                <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="topic-avatar">
                <div class="topic-creator">
                    <div class="creator-name">
                        创意设计社区
                        <span class="creator-badge">官方</span>
                    </div>
                    <div class="topic-meta">
                        发布于 2023-06-15 · 3.2k 浏览 · 245 人参与
                    </div>
                </div>
            </div>
            
            <div class="topic-content">
                <div class="topic-title">2023年最值得关注的设计趋势讨论，设计师必看！</div>
                
                <div class="topic-text">
                    随着技术的发展和用户需求的变化，设计领域也在不断演变。2023年，我们看到了许多令人兴奋的设计趋势正在形成，从色彩到排版，从交互到体验，都有了新的突破。
                    <br><br>
                    本话题旨在汇集各位设计师的观察和见解，共同探讨今年的设计趋势走向，分享优秀案例和实践经验。无论你是UI/UX设计师、平面设计师还是产品设计师，都欢迎加入讨论！
                </div>
                
                <img src="https://picsum.photos/id/1025/800/400" alt="话题图片" class="topic-image">
                
                <div class="topic-text">
                    个人观察到的几个主要趋势：
                    1. 极简主义与功能性的结合
                    2. 3D元素的广泛应用
                    3. 自然色彩和有机形状的回归
                    4. 动态交互效果的创新
                    5. 无障碍设计的普及
                </div>
                
                <div class="topic-tags">
                    <span class="topic-tag">#设计趋势#</span>
                    <span class="topic-tag">#UI设计#</span>
                    <span class="topic-tag">#UX设计#</span>
                    <span class="topic-tag">#创意灵感#</span>
                    <span class="topic-tag">#设计师交流#</span>
                </div>
            </div>
            
            <div class="topic-stats">
                <div class="topic-stat">
                    <i class="far fa-heart"></i>
                    <span>1.2k 喜欢</span>
                </div>
                <div class="topic-stat">
                    <i class="far fa-comment"></i>
                    <span>532 评论</span>
                </div>
                <div class="topic-stat">
                    <i class="far fa-bookmark"></i>
                    <span>876 收藏</span>
                </div>
            </div>
            
            <div class="topic-actions">
                <button class="topic-action active">
                    <i class="far fa-heart"></i>
                    <span>喜欢</span>
                </button>
                <button class="topic-action">
                    <i class="far fa-comment"></i>
                    <span>评论</span>
                </button>
                <button class="topic-action">
                    <i class="fas fa-share-alt"></i>
                    <span>分享</span>
                </button>
                <button class="topic-action">
                    <i class="far fa-bookmark"></i>
                    <span>收藏</span>
                </button>
            </div>
        </div>
    </div>
    
    <!-- 文章列表区域 -->
    <div class="content-section" id="articles">
        <div class="content-list">
            <div class="list-item article-item">
                <img src="https://picsum.photos/id/180/300/300" alt="文章封面" class="article-image">
                <div class="article-content">
                    <div class="article-title">2023年UI设计趋势深度分析：从Awwwards获奖作品看未来</div>
                    <div class="article-excerpt">本文通过分析Awwwards 2023年上半年获奖作品，总结出了今年UI设计的五大趋势，包括玻璃态设计的进化、微交互的创新应用等...</div>
                    <div class="article-meta">
                        <span>设计达人</span>
                        <span>2.5k 阅读</span>
                    </div>
                </div>
            </div>
            
            <div class="list-item article-item">
                <img src="https://picsum.photos/id/0/300/300" alt="文章封面" class="article-image">
                <div class="article-content">
                    <div class="article-title">从用户心理学角度看现代产品设计</div>
                    <div class="article-excerpt">优秀的设计不仅要美观，更要符合用户心理。本文结合认知心理学原理，探讨如何设计出更符合用户行为习惯的产品界面和交互流程...</div>
                    <div class="article-meta">
                        <span>UX研究员</span>
                        <span>1.8k 阅读</span>
                    </div>
                </div>
            </div>
            
            <div class="list-item article-item">
                <img src="https://picsum.photos/id/160/300/300" alt="文章封面" class="article-image">
                <div class="article-content">
                    <div class="article-title">响应式设计的未来：从移动优先到多端适配</div>
                    <div class="article-excerpt">随着设备类型的多样化，响应式设计面临新的挑战。本文分享了最新的响应式设计方法论和实践技巧，帮助设计师应对多设备适配难题...</div>
                    <div class="article-meta">
                        <span>前端设计师</span>
                        <span>3.2k 阅读</span>
                    </div>
                </div>
            </div>
            
            <button class="load-more">
                <i class="fas fa-spinner fa-spin"></i>
                <span>加载更多文章</span>
            </button>
        </div>
    </div>
    
    <!-- 相册列表区域 -->
    <div class="content-section" id="albums">
        <div class="content-list">
            <div class="list-item album-item">
                <div class="album-title">2023年国际设计周参展作品精选</div>
                <div class="album-images">
                    <div class="album-image">
                        <img src="https://picsum.photos/id/106/300/300" alt="相册图片">
                    </div>
                    <div class="album-image">
                        <img src="https://picsum.photos/id/119/300/300" alt="相册图片">
                    </div>
                    <div class="album-image album-more">
                        <img src="https://picsum.photos/id/129/300/300" alt="相册图片">
                    </div>
                </div>
                <div class="album-meta">
                    <span>设计爱好者</span>
                    <span>12张照片 · 1.5k 浏览</span>
                </div>
            </div>
            
            <div class="list-item album-item">
                <div class="album-title">我的工作室一角与设计灵感墙</div>
                <div class="album-images">
                    <div class="album-image">
                        <img src="https://picsum.photos/id/26/300/300" alt="相册图片">
                    </div>
                    <div class="album-image">
                        <img src="https://picsum.photos/id/42/300/300" alt="相册图片">
                    </div>
                    <div class="album-image">
                        <img src="https://picsum.photos/id/48/300/300" alt="相册图片">
                    </div>
                </div>
                <div class="album-meta">
                    <span>自由设计师</span>
                    <span>6张照片 · 892 浏览</span>
                </div>
            </div>
            
            <div class="list-item album-item">
                <div class="album-title">各国设计博物馆参观纪实</div>
                <div class="album-images">
                    <div class="album-image">
                        <img src="https://picsum.photos/id/111/300/300" alt="相册图片">
                    </div>
                    <div class="album-image">
                        <img src="https://picsum.photos/id/112/300/300" alt="相册图片">
                    </div>
                    <div class="album-image album-more">
                        <img src="https://picsum.photos/id/113/300/300" alt="相册图片">
                    </div>
                </div>
                <div class="album-meta">
                    <span>设计旅行者</span>
                    <span>24张照片 · 3.1k 浏览</span>
                </div>
            </div>
            
            <button class="load-more">
                <i class="fas fa-spinner fa-spin"></i>
                <span>加载更多相册</span>
            </button>
        </div>
    </div>
    
    <!-- 动态列表区域 -->
    <div class="content-section" id="statuses">
        <div class="content-list">
            <div class="list-item status-item">
                <img src="https://picsum.photos/id/65/200/200" alt="用户头像" class="status-avatar">
                <div class="status-content">
                    <div class="status-author">交互设计师小王</div>
                    <div class="status-text">今天尝试了新的设计工具，效率提升不少！特别是原型动画功能，比之前用的软件流畅多了，推荐给各位设计师朋友。</div>
                    <div class="status-images">
                        <div class="status-image">
                            <img src="https://picsum.photos/id/96/300/300" alt="动态图片">
                        </div>
                    </div>
                    <div class="status-time">2小时前</div>
                    <div class="status-actions">
                        <div class="status-action">
                            <i class="far fa-heart"></i>
                            <span>128</span>
                        </div>
                        <div class="status-action">
                            <i class="far fa-comment"></i>
                            <span>36</span>
                        </div>
                        <div class="status-action">
                            <i class="fas fa-share-alt"></i>
                            <span>分享</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="list-item status-item">
                <img src="https://picsum.photos/id/62/200/200" alt="用户头像" class="status-avatar">
                <div class="status-content">
                    <div class="status-author">视觉设计师Lisa</div>
                    <div class="status-text">刚完成一个电商APP的改版设计，整理了一些设计思路和规范，明天会发一篇详细的文章分享给大家，敬请期待！</div>
                    <div class="status-time">昨天 18:45</div>
                    <div class="status-actions">
                        <div class="status-action">
                            <i class="far fa-heart"></i>
                            <span>256</span>
                        </div>
                        <div class="status-action">
                            <i class="far fa-comment"></i>
                            <span>42</span>
                        </div>
                        <div class="status-action">
                            <i class="fas fa-share-alt"></i>
                            <span>分享</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="list-item status-item">
                <img src="https://picsum.photos/id/91/200/200" alt="用户头像" class="status-avatar">
                <div class="status-content">
                    <div class="status-author">设计总监老马</div>
                    <div class="status-text">参加了一个设计趋势论坛，最大的感受是AI工具正在深刻改变设计流程。未来设计师需要更多关注创意和策略，而不是基础执行工作。</div>
                    <div class="status-images">
                        <div class="status-image">
                            <img src="https://picsum.photos/id/1071/300/300" alt="动态图片">
                        </div>
                        <div class="status-image">
                            <img src="https://picsum.photos/id/1073/300/300" alt="动态图片">
                        </div>
                    </div>
                    <div class="status-time">3天前</div>
                    <div class="status-actions">
                        <div class="status-action">
                            <i class="far fa-heart"></i>
                            <span>512</span>
                        </div>
                        <div class="status-action">
                            <i class="far fa-comment"></i>
                            <span>87</span>
                        </div>
                        <div class="status-action">
                            <i class="fas fa-share-alt"></i>
                            <span>分享</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <button class="load-more">
                <i class="fas fa-spinner fa-spin"></i>
                <span>加载更多动态</span>
            </button>
        </div>
    </div>
    
    <!-- 服务列表区域 -->
    <div class="content-section" id="services">
        <div class="content-list">
            <div class="list-item service-item">
                <div class="service-icon">
                    <i class="fas fa-paint-brush"></i>
                </div>
                <div class="service-content">
                    <div class="service-title">UI/UX设计服务 - 从概念到落地</div>
                    <div class="service-desc">提供完整的产品设计解决方案，包括用户研究、原型设计、视觉设计和交互设计。</div>
                    <div class="service-meta">
                        <div class="service-price">¥5,000起</div>
                        <div class="service-rating">
                            <i class="fas fa-star"></i>
                            <span>4.9</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="list-item service-item">
                <div class="service-icon">
                    <i class="fas fa-video"></i>
                </div>
                <div class="service-content">
                    <div class="service-title">产品演示动画制作</div>
                    <div class="service-desc">为你的产品创建高质量演示动画，展示产品功能和使用流程，提升转化率。</div>
                    <div class="service-meta">
                        <div class="service-price">¥2,000起</div>
                        <div class="service-rating">
                            <i class="fas fa-star"></i>
                            <span>4.8</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="list-item service-item">
                <div class="service-icon">
                    <i class="fas fa-font"></i>
                </div>
                <div class="service-content">
                    <div class="service-title">品牌视觉识别系统设计</div>
                    <div class="service-desc">打造独特的品牌形象，包括标志设计、色彩系统、字体规范和应用场景设计。</div>
                    <div class="service-meta">
                        <div class="service-price">¥8,000起</div>
                        <div class="service-rating">
                            <i class="fas fa-star"></i>
                            <span>4.7</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <button class="load-more">
                <i class="fas fa-spinner fa-spin"></i>
                <span>加载更多服务</span>
            </button>
        </div>
    </div>
    
    <!-- 招聘列表区域 -->
    <div class="content-section" id="jobs">
        <div class="content-list">
            <div class="list-item job-item">
                <div class="job-title">资深UI/UX设计师</div>
                <div class="job-company">创新科技有限公司</div>
                <div class="job-details">
                    <span class="job-tag">3-5年经验</span>
                    <span class="job-tag">本科及以上</span>
                    <span class="job-tag">全职</span>
                    <span class="job-tag">北京</span>
                </div>
                <div class="job-meta">
                    <span>薪资：15k-25k/月</span>
                    <span>发布于 3天前</span>
                </div>
            </div>
            
            <div class="list-item job-item">
                <div class="job-title">视觉设计师</div>
                <div class="job-company">未来数字工作室</div>
                <div class="job-details">
                    <span class="job-tag">1-3年经验</span>
                    <span class="job-tag">本科及以上</span>
                    <span class="job-tag">全职</span>
                    <span class="job-tag">上海</span>
                </div>
                <div class="job-meta">
                    <span>薪资：12k-20k/月</span>
                    <span>发布于 1周前</span>
                </div>
            </div>
            
            <div class="list-item job-item">
                <div class="job-title">交互设计师（远程）</div>
                <div class="job-company">全球创意网络</div>
                <div class="job-details">
                    <span class="job-tag">5年以上</span>
                    <span class="job-tag">本科及以上</span>
                    <span class="job-tag">远程</span>
                    <span class="job-tag">不限地点</span>
                </div>
                <div class="job-meta">
                    <span>薪资：20k-35k/月</span>
                    <span>发布于 2天前</span>
                </div>
            </div>
            
            <button class="load-more">
                <i class="fas fa-spinner fa-spin"></i>
                <span>加载更多招聘</span>
            </button>
        </div>
    </div>
    
    <!-- 求职列表区域 -->
    <div class="content-section" id="resumes">
        <div class="content-list">
            <div class="list-item resume-item">
                <div class="resume-name">张明 - UI设计师</div>
                <div class="resume-title">4年电商平台UI设计经验，擅长用户体验优化</div>
                <div class="resume-details">
                    <span>本科 | 视觉传达设计</span>
                    <span class="resume-experience">4年工作经验</span>
                    <span>期望地点：广州</span>
                </div>
                <div class="job-meta">
                    <span>期望薪资：15k-20k/月</span>
                    <span>更新于 1天前</span>
                </div>
            </div>
            
            <div class="list-item resume-item">
                <div class="resume-name">李华 - UX研究员</div>
                <div class="resume-title">6年用户研究经验，曾任职于知名互联网公司</div>
                <div class="resume-details">
                    <span>硕士 | 人机交互</span>
                    <span class="resume-experience">6年工作经验</span>
                    <span>期望地点：北京</span>
                </div>
                <div class="job-meta">
                    <span>期望薪资：25k-35k/月</span>
                    <span>更新于 3天前</span>
                </div>
            </div>
            
            <div class="list-item resume-item">
                <div class="resume-name">王芳 - 动效设计师</div>
                <div class="resume-title">3年动效设计经验，擅长AE、Principle等工具</div>
                <div class="resume-details">
                    <span>本科 | 数字媒体艺术</span>
                    <span class="resume-experience">3年工作经验</span>
                    <span>期望地点：上海</span>
                </div>
                <div class="job-meta">
                    <span>期望薪资：18k-25k/月</span>
                    <span>更新于 1周前</span>
                </div>
            </div>
            
            <button class="load-more">
                <i class="fas fa-spinner fa-spin"></i>
                <span>加载更多求职</span>
            </button>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item active">
            <i class="fas fa-home nav-icon"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-compass nav-icon"></i>
            <span>发现</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-plus-circle nav-icon"></i>
            <span>发布</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-bell nav-icon"></i>
            <span>通知</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user nav-icon"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 内容类型切换
        const contentTabs = document.querySelectorAll('.content-tab');
        const contentSections = document.querySelectorAll('.content-section');
        
        contentTabs.forEach(tab => {
            tab.addEventListener('click', function() {
                // 移除所有标签的active类
                contentTabs.forEach(t => t.classList.remove('active'));
                // 给当前点击的标签添加active类
                this.classList.add('active');
                
                // 获取目标内容区域ID
                const targetId = this.getAttribute('data-target');
                
                // 隐藏所有内容区域
                contentSections.forEach(section => {
                    section.classList.remove('active');
                });
                
                // 显示目标内容区域
                document.getElementById(targetId).classList.add('active');
            });
        });
        
        // 按钮交互
        document.getElementById('backBtn').addEventListener('click', () => {
            alert('返回上一页');
        });
        
        document.getElementById('moreBtn').addEventListener('click', () => {
            alert('更多选项');
        });
        
        // 加载更多按钮
        const loadMoreBtns = document.querySelectorAll('.load-more');
        loadMoreBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const originalContent = this.innerHTML;
                this.innerHTML = '<i class="fas fa-spinner fa-spin"></i><span> 加载中...</span>';
                
                // 模拟加载延迟
                setTimeout(() => {
                    this.innerHTML = originalContent;
                    alert('已加载更多内容');
                }, 1500);
            });
        });
        
        // 话题操作按钮
        const topicActions = document.querySelectorAll('.topic-action');
        topicActions.forEach(action => {
            action.addEventListener('click', function() {
                // 点赞按钮特殊处理（切换状态）
                if (this.querySelector('i.far.fa-heart')) {
                    this.classList.toggle('active');
                    const icon = this.querySelector('i');
                    if (this.classList.contains('active')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        alert('已点赞');
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        alert('已取消点赞');
                    }
                } else if (this.querySelector('i.far.fa-comment')) {
                    alert('查看评论');
                } else if (this.querySelector('i.fas.fa-share-alt')) {
                    alert('分享话题');
                } else if (this.querySelector('i.far.fa-bookmark')) {
                    this.classList.toggle('active');
                    const icon = this.querySelector('i');
                    if (this.classList.contains('active')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        alert('已收藏');
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        alert('已取消收藏');
                    }
                }
            });
        });
    </script>
</body>
</html>
